<template>
  <div class="header">
    <div class="browse">
      <!--      <div class="browse-category">
              Browse Category
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                <path d="M6 9l6 6 6-6" /></svg>
            </div>-->
      <div class="search-bar">
        <input type="text" placeholder="Search Book"/>
      </div>
    </div>
    <div class="header-title" style="font-size: 18px;color: black">恋爱博物馆</div>
    <div class="profile">
     <div class="user-profile" v-if="isLogin">
        <img :src="currentUserInfo.url" alt="" class="user-img">
      </div>
      <el-dropdown split-button type="primary" v-if="isLogin">
        <span>{{currentUserInfo.nickname}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

       <el-button type="primary" round v-else>
        <router-link to="/login" style="color: white;text-decoration: none">login</router-link>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHeader",
  data(){
    return {
      isLogin: '',
      currentUserInfo: {},
    }
  },
   mounted(){
    this.getCurrentUserInfo()
  },

  created() {
    const tokenStr = window.localStorage.getItem('lmToken')
    if (tokenStr){
      this.isLogin=true;
      // this.getCurrentUserInfo()
    }else {
      this.isLogin=false
    }
  },

  methods:{
    logout(){
      console.log("logout-------------")
      window.localStorage.removeItem('lmToken')
      this.isLogin=false
      this.$router.push({path: this.redirect || '/memory'}).catch(() => {})
    },
    getCurrentUserInfo(){
      console.log('getCurrentUserInfo-----------------------------')
      this.axios.post('http://10.1.188.10:20000/users/currentUser').then(response => {
        this.currentUserInfo = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>
